<template>
  <div :class="['general', 'employee',index===0?'danger':(index===1?'blue':(index===2?'warning':'success'))]">
    <div class="header">
      {{ info.title }}{{title}}
    </div>
    <ul>
      <li v-for="(list,index) in info.lists" v-if="list.money||list.money===0" :key="index" class="flex pdh10">
        <span class="title flex-auto">{{ list.title }}</span>
        <span class="flex-auto">{{ list.money }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "department_statistics",
    props: {
      info: {
        type: Object,
        default: () => {
          return {}
        }
      },
      index:{
        type:Number,
        default:0
      },
      title:{
        type:String,
        default:'本月统计'
      },
    },
  }
</script>

<style>
  .flex {
    display: flex;
    align-items: center;
  }
  .flex-end {
    justify-content: flex-end;

  }

  .pdh10 {
    padding: 2px 10px;
  }

  .flex-auto {
    flex: 1;
  }

  .tar {
    text-align: right;
  }
</style>

